<template>
  <tbody>
    <!-- 如果没有数据就显示无数据 -->
    <tr v-if="!list.length">
      <td colspan="5">
        <span class="none">暂无数据</span>
      </td>
    </tr>
    <tr v-else v-for="(item, index) in list" :key="item.id">
      <!-- 编号 -->
      <td>{{ index + 1}}</td>
      <!-- 科目 -->
      <td>{{ item.subject }}</td>
      <!-- 成绩 在小于60时加上 red class -->
      <td :class="{red: item.score < 60}">{{ item.score }}</td>
      <!-- 考试时间 -->
      <td>{{ steTime(item.date) }}</td>
      <!-- 操作删除 -->
      <td><a href="#" @click="delFn(item.id)">删除</a></td>
    </tr>
  </tbody>
</template>

<script>
// 引入 moment 格式化日期
import moment from 'moment'
export default {
  props:{
    list:{
      type: Array,
      required: true
    }
  },
  methods:{
    // 接收ID
    delFn(id){
      // 监听delStu并传参
      this.$emit('delStu', id)
    },
    // 格式化时间
    steTime(value){
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style></style>
